<template>
  <div class="home">
    <div class="selcart">
      <a-space align="center">
        <span style="margin-left: 15px">学期</span>
        <a-select
          v-model:value="selectedSemester"
          placeholder="请选择学期"
          style="width: 130px"
          allowClear="true"
        >
          <a-select-option
            v-for="semester in semesters"
            :key="semester.value"
            :value="semester.value"
          >
            {{ semester.label }}
          </a-select-option>
        </a-select>

        <span style="margin-left: 15px">周次</span>
        <a-select
          v-model:value="selectedWeek"
          placeholder="请选择周次"
          style="width: 130px"
          allowClear="true"
        >
          <a-select-option
            v-for="week in weeks"
            :key="week.value"
            :value="week.value"
          >
            {{ week.label }}
          </a-select-option>
        </a-select>
      </a-space>
    </div>

    <div class="time-table-container">
      <a-table
        :dataSource="labRoomsData"
        :columns="columns"
        bordered
        size="middle"
        class="time-table"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === '1-2' && record.session == 1">
            <div>课程：{{ record.courseName }}</div>
            <div>教师：{{ record.teacherName }}</div>
            <div>班级：{{ record.className }}</div>
            <div>周次：{{ record.beginWeek }}-{{ record.endWeek }}</div>
          </template>
          <template v-else-if="column.key === '3-5' && record.session == 2">
            <div>课程：{{ record.courseName }}</div>
            <div>教师：{{ record.teacherName }}</div>
            <div>班级：{{ record.className }}</div>
            <div>周次：{{ record.beginWeek }}-{{ record.endWeek }}</div>
          </template>
          <template v-else-if="column.key === '6-7' && record.session == 3">
            <div>课程：{{ record.courseName }}</div>
            <div>教师：{{ record.teacherName }}</div>
            <div>班级：{{ record.className }}</div>
            <div>周次：{{ record.beginWeek }}-{{ record.endWeek }}</div>
          </template>
          <template v-else-if="column.key === '8-9' && record.session == 4">
            <div>课程：{{ record.courseName }}</div>
            <div>教师：{{ record.teacherName }}</div>
            <div>班级：{{ record.className }}</div>
            <div>周次：{{ record.beginWeek }}-{{ record.endWeek }}</div>
          </template>
          <template v-else-if="column.key === '10-12' && record.session == 5">
            <div>课程：{{ record.courseName }}</div>
            <div>教师：{{ record.teacherName }}</div>
            <div>班级：{{ record.className }}</div>
            <div>周次：{{ record.beginWeek }}-{{ record.endWeek }}</div>
          </template>

          <template v-else-if="column.key === '13-15' && record.session == 6">
            <div>课程：{{ record.courseName }}</div>
            <div>教师：{{ record.teacherName }}</div>
            <div>班级：{{ record.className }}</div>
            <div>周次：{{ record.beginWeek }}-{{ record.endWeek }}</div>
          </template>

          <template
            v-else-if="
              column.key === 'labName' ||
              column.key === 'labType' ||
              column.key == 'day'
            "
          >
          </template>

          <template v-else> 空</template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watchEffect } from "vue";
import { labArrangeQuery } from "@/api/methods/labarrangeReq";

import { semesterAll } from "@/api/methods/semesterReq";

import { useLocalStorage } from "@vueuse/core";
import { merge } from "lodash";
import { labInfo, labTypeInfo } from "@/utils/userInfo";

const semesterId = useLocalStorage<string>("semesterId", "");
const semesterName = useLocalStorage<string>("semesterName", "");

const semesters = ref();

const labRoomsData = ref();
const selectedSemester = ref();
const selectedWeek = ref("");
const selectedDayOfWeek = ref("");

onMounted(async () => {
  try {
    const semesterResult = await semesterAll({});
    const semesterOptions = semesterResult.data.map((semester: any) => ({
      value: semester.id,
      label: semester.name,
    }));
    semesters.value = semesterOptions;

    selectedSemester.value = semesterOptions.find(
      (item: any) => item.label === semesterName.value
    ).value;
  } catch (error) {
    console.error("Error fetching semesters:", error);
  }
});

const weeks = [
  { value: "1", label: "第1周" },
  { value: "2", label: "第2周" },
  { value: "3", label: "第3周" },
  { value: "4", label: "第4周" },
  { value: "5", label: "第5周" },
  { value: "6", label: "第6周" },
  { value: "7", label: "第7周" },
  { value: "8", label: "第8周" },
  { value: "9", label: "第9周" },
  { value: "10", label: "第10周" },
  { value: "11", label: "第11周" },
  { value: "12", label: "第12周" },
  { value: "13", label: "第13周" },
  { value: "14", label: "第14周" },
  { value: "15", label: "第15周" },
  { value: "16", label: "第16周" },
  { value: "17", label: "第17周" },
  { value: "18", label: "第18周" },
  { value: "19", label: "第19周" },
  { value: "20", label: "第20周" },
];

const daysOfWeek = [
  { value: "1", label: "星期一" },
  { value: "2", label: "星期二" },
  { value: "3", label: "星期三" },
  { value: "4", label: "星期四" },
  { value: "5", label: "星期五" },
  { value: "6", label: "星期六" },
  { value: "7", label: "星期日" },
];

const columns = [
  {
    title: "星期",
    dataIndex: "day",
    key: "day",
    customCell: (record, rowIndex, column) => {
      return {
        rowSpan: daySpanArr.value[rowIndex],
        style: {
          "text-align": "center",
          "vertical-align": "middle",
        },
      };
    },
    customRender: ({ text, record }) => {
      return translateDay(text);
    },
  },
  {
    title: "实验室类型名",
    dataIndex: "labType",
    key: "labType",
    width: "100px",
    customRender: ({ text, record }) => {
      return translateLabType(text);
    },
  },
  {
    title: "机房",
    dataIndex: "labName",
    key: "labName",
  },
  // 时间
  {
    title: "1-2",
    dataIndex: "session",
    key: "1-2",
  },
  {
    title: "3-5",
    dataIndex: "session",
    key: "3-5",
  },
  {
    title: "6-7",
    dataIndex: "session",
    key: "6-7",
  },
  {
    title: "8-9",
    dataIndex: "session",
    key: "8-9",
  },
  {
    title: "10-12",
    dataIndex: "session",
    key: "10-12",
  },
  {
    title: "13-15",
    dataIndex: "session",
    key: "13-15",
  },
];

const getRowspan = (dataScroce, filed) => {
  let spanArr = [];
  let position = 0;
  dataScroce.forEach((item, index) => {
    if (index === 0) {
      spanArr.push(1);

      position = 0;
    } else {
      //需要合并的地方判断
      if (dataScroce[index][filed] == dataScroce[index - 1][filed]) {
        spanArr[position] += 1;
        spanArr.push(0);
        // spanArr.splice(2, 0, 0)
      } else {
        spanArr.push(1);
        position = index;
      }
    }
  });
  return spanArr;
};

/* const mockData = [
  {
    day: 1,
    labName: "实验室A",
    labId: "L001",
    session: 1,
    courseName: "计算机网络",
    className: "计科1901班",
    teacherName: "张老师",
    beginWeek: 1,
    endWeek: 2,
  },
  {
    day: 2,
    labName: "实验室B",
    labId: "L002",
    session: 2,
    courseName: "数据库原理",
    className: "计科1902班",
    teacherName: "李老师",
    beginWeek: 3,
    endWeek: 6,
  },
  {
    day: 2,
    labName: "实验室C",
    labId: "L003",
    session: 3,
    courseName: "软件工程",
    className: "计科1903班",
    teacherName: "王老师",
    beginWeek: 5,
    endWeek: 7,
  },
  {
    day: 3,
    labName: "实验室D",
    labId: "L004",
    session: 4,
    courseName: "人工智能",
    className: "计科1904班",
    teacherName: "赵老师",
    beginWeek: 5,
    endWeek: 7,
  },
];

 labRoomsData.value = mockData; */

const daySpanArr = ref();
watchEffect(async () => {
  if (selectedSemester.value && selectedWeek.value) {
    const params = {
      semesterId: selectedSemester.value,
      week: selectedWeek.value,
    };

    try {
      const response = await labArrangeQuery(params);
      labRoomsData.value = response.data.sort((a, b) => a.day - b.day);
      daySpanArr.value = labRoomsData.value
        ? getRowspan(labRoomsData.value, "day")
        : [];
    } catch (error) {
      console.error("Failed to fetch lab arrange data:", error);
    }
  }
});

const translateDay = (day) => {
  switch (day) {
    case 1:
      return "星期一";
    case 2:
      return "星期二";
    case 3:
      return "星期三";
    case 4:
      return "星期四";
    case 5:
      return "星期五";
    case 6:
      return "星期六";
    case 7:
      return "星期日";
    default:
      return "--";
  }
};

function translateLabId(text) {
  const labName = labInfo.value.find((i) => i.id === text).name;
  return labName || "名字不存在";
}

const translateLabType = (text) => {
  const labTypeName = labTypeInfo.value.find((i) => i.id == text)?.typeName;
  return labTypeName || "--";
};
</script>
<style scoped lang="scss">
.home {
  height: 100%;
  width: 100%;
}
.selcart {
  height: 80px;
  display: flex;
  background-color: white;
  justify-content: left;
  border-radius: 10px;
}

.time-table-container {
  margin-top: 20px;
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  .time-table {
    width: 100%;
  }
}

/* @import url(); 引入css类 */
</style>
